<template>
  <div id="viewDiv" class="map">
    <div class="searchMap">
      <el-input v-model="searchForm" placeholder="业务号、身份证号" size="medium">
        <el-button slot="append" icon="el-icon-search" @click="submitForm('searchForm')" type="primary">
        </el-button>
      </el-input>

    </div>
    <div class="checkMap">
      <div class="dingwei">
        <el-tooltip class="item" effect="dark" content="定位" placement="left">
          <el-button @click="getCurrentLocation" circle size="medium" icon="el-icon-location">
          </el-button>
        </el-tooltip>
      </div>
      <div class="dingwei">

        <el-tooltip class="item" effect="dark" content="图层" placement="left">
          <el-button circle size="medium" icon="el-icon-coin" @click="mapType=true">
          </el-button>
        </el-tooltip>

        <el-dialog :visible.sync="mapType" :modal="false" :show-close="false">
          <el-checkbox-group v-model="checkList" style="margin-left:20px;margin-top:-2%;width:80%"
            @change="changeMapType">
            <el-checkbox label="一到场" class="checkboxStyle">
            </el-checkbox>
            <div class="legend" style="background:red"></div>
            <el-checkbox label="二到场" class="checkboxStyle">
            </el-checkbox>
            <div class="legend" style="background:yellow"></div>
            <el-checkbox label="三到场" class="checkboxStyle">
            </el-checkbox>
            <div class="legend" style="background:blue"></div>
            <el-checkbox label="基本农田" class="checkboxStyle">
            </el-checkbox>
            <div class="legend" style="background:green"></div>
            <el-checkbox label="生态红线" class="checkboxStyle">
            </el-checkbox>
            <div class="legend" style="background:black;margin-left:5px"></div>
          </el-checkbox-group>
        </el-dialog>
      </div>
      <div class="dingwei">
        <el-dropdown id="tool">
          <el-tooltip class="item" effect="dark" content="工具" placement="left">
            <el-button circle size="medium" icon="el-icon-menu"></el-button>
          </el-tooltip>
          <el-dropdown-menu style="background-color:#ffffff1f;">
            <el-dropdown-item class="menu_itme"><i class="el-icon-coordinate"></i>标记 </el-dropdown-item>
            <el-dropdown-item class="menu_itme"> <i class="el-icon-right"></i>测距
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-drawer title="业务信息" :visible.sync="drawer" :direction="direction" :close="handleClose">
      <div>
        <el-form :model="formData" ref="formData" :inline="true" style="text-align:left;" label-width="180px">
          <el-form-item label="申请人姓名" prop="name">
            <el-input v-model="formData.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="业务编号" prop="applyCode">
            <el-input v-model="formData.applyCode" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="idCard">
            <el-input v-model="formData.idCard" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="户口所在地" prop="address">
            <el-input v-model="formData.address" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请房基地占地面积" prop="applyFoundationArea">
            <el-input v-model="formData.applyFoundationArea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请宅基地面积" prop="applyHomesteadArea">
            <el-input v-model="formData.applyHomesteadArea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请住房建筑面积" prop="applyHousingArea">
            <el-input v-model="formData.applyHousingArea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="现宅基地面积" prop="nowHomesteadArea">
            <el-input v-model="formData.nowHomesteadArea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="现建筑面积" prop="nowBuildingArea">
            <el-input v-model="formData.nowBuildingArea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="现宅基地保留面积" prop="nowSaveArea">
            <el-input v-model="formData.nowSaveArea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="现宅基地其他面积" prop="nowOtherArea">
            <el-input v-model="formData.nowOtherArea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="现宅基地退给村集体" prop="nowReturnArea">
            <el-input v-model="formData.nowReturnArea" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <!-- <div style="margin-top:20px;margin-left:200px;">
          <el-button @click="moveGraphicMethod" type="primary">拖动</el-button>
        </div> -->
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import esriLoader from "esri-loader";
  import {
    getFourPoint,
    getMapInfoApi,
    searchByApi,
    updatePointApi
  } from "@/api/applyApi";
  // import {
  //   relativeTimeThreshold
  // } from "../../../public/arcgis_js/3.24/moment/moment";
  // import lang from '../../../public/arcgis_js/3.24/dojo/_base/lang';
  import {
    map
  } from 'highcharts';
  export default {
    data() {
      return {
        checkList: [
          '一到场',
          '二到场',
          '三到场'
        ],
        mapType: false,
        mapState: false,
        checkboxGroup: [0, 1, 2],
        codeList1: [],
        codeList2: [],
        codeList3: [],
        statePointList1: [],
        statePointList2: [],
        statePointList3: [],
        searchStatePointList1: [],
        searchStatePointList2: [],
        searchStatePointList3: [],
        trackPointList: [], //图
        allChecksate: [], //所有图形显示的状态
        map: null, //地图
        Point: null, //点
        SpatialReference: null, //参考系
        PrjParams: null,
        inSR: null,
        SimpleLineSymbol: null,
        Color: null,
        Polygon: null,
        Graphic: null,
        gsvc: null,
        drawer: false, //设置抽屉默认不显示
        direction: 'rtl',
        searchForm: "",
        formData: {
          name: "", //申请人姓名
          applyCode: "",
          idCard: "",
          address: "",
          applyFoundationArea: "",
          applyHomesteadArea: "",
          applyHousingArea: "",
          nowHomesteadArea: "",
          nowBuildingArea: "",
          nowSaveArea: "",
          nowOtherArea: "",
          nowReturnArea: ""
        },
        pointCenterPD: 0,
        firstLayer: null, //存放数据库中的原图图层
        movegraphic: null, //新生成的可移动图形
        moveLayer: null, //存放可拖动图形的图层
        lastGraphic: null, //最后一个图形
        selectedGraphics: null, //选中的原图
        startPoint: null, //起始点
        currentPoint: null, //鼠标移动时的点位置
        redsymbol: null, //图形样式（红色一到场）
        yellowsymbol: null, //图形样式（黄色二到场）
        bluesymbol: null, //图形样式（蓝色三到场）
        symbol: null, //搜索、移动图形样式
      };
    },
    created() {
      getFourPoint().then((res) => {
        //var obj={}
        var pointList = [];
        pointList = res.data.data;
        setTimeout(() => {
          this.getLocation(pointList);
        }, 1000);
      });
    },
    methods: {
      /**
       * 改变图层
       */
      changeMapType() {
        this.checkboxGroup = [];
        if (this.checkList.length == 0) {
          this.firstLayer.clear();
        } else {
          for (let i = 0; i < this.checkList.length; i++) {
            switch (this.checkList[i]) {
              case '一到场':
                this.checkboxGroup.push(0);
                for (let j = 0; j < this.statePointList1.length; j++) {
                  this.firstLayer.add(this.statePointList1[j])
                }
                break;
              case '二到场':
                this.checkboxGroup.push(1);
                for (let j = 0; j < this.statePointList2.length; j++) {
                  this.firstLayer.add(this.statePointList2[j])
                }
                break;
              case '三到场':
                this.checkboxGroup.push(2);
                for (let j = 0; j < this.statePointList3.length; j++) {
                  this.firstLayer.add(this.statePointList3[j])
                }
                break;
              case '基本农田':
                console.log("基本农田")
                break;
              case '生态红线':
                console.log("生态红线")
                break;
              default:
                console.log("其他")
                break;
            }
          }
        }
      },

      /**
       * 定位
       */
      getCurrentLocation() {
        var x = document.getElementById("demo");
        var Point = this.Point;
        var SpatialReference = this.SpatialReference;
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition((position) => {
            var centerPoint = new Point(
              position.coords.longitude, position.coords.latitude
            );
            this.map.centerAt(centerPoint, 18)
          });
        } else {
          this.$message.error("当前浏览器不支持定位")
        }

      },
      //核心公式
      // 平面坐标x = 经度*20037508.34/108
      // 平面坐标y = log（tan（（90+纬度）*PI/360））/（PI/360）*20037508.34/180
      lonlattoWebMercator(lon, lat) {
        var xy = [];
        var x = (lon * 20037508.34) / 180;
        var y =
          Math.log(Math.tan(((90 + lat) * Math.PI) / 360)) / (Math.PI / 180);
        y = (y * 20037508.34) / 180;
        xy[0] = x;
        xy[1] = y;
        return xy;
      },
      //关闭抽屉
      handleClose() {
        this.$refs[FormData].resetFields();
      },
      //获取图形
      getLocation(pointList) {
        var _that = this;
        esriLoader.loadModules([
            "esri/map",
            "esri/SpatialReference",
            "esri/tasks/GeometryService",
            "esri/geometry/Point",
            "esri/tasks/ProjectParameters",
            "esri/layers/WebTiledLayer",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/Color",
            "esri/geometry/Polygon",
            "esri/graphic",
            "esri/layers/GraphicsLayer",
            "dojo/domReady!"
          ], {
            css: true,
            url: "http://39.100.19.27:9001/arcgis_js/3.24/init.js"
          })
          .then(([Map, SpatialReference, GeometryService, Point, ProjectParameters, WebTiledLayer, SimpleFillSymbol,
            SimpleLineSymbol, Color, Polygon, Graphic, GraphicsLayer
          ]) => {
            _that.Point = Point;
            _that.inSR = new SpatialReference({
              wkid: 4524
            })
            _that.SpatialReference = new SpatialReference({
              wkid: 4326
            });
            //绿色（查询颜色和移动色）
            _that.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol
              .STYLE_SOLID, new Color([0, 255, 0]), 2), new Color([0, 255, 0, 0.5]));
            //红色（一到场颜色）
            _that.redsymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol
              .STYLE_SOLID, new Color([220, 20, 60]), 2), new Color([220, 20, 60, 0.25]));
            //黄色（二道场图形颜色）
            _that.yellowsymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, new Color([255, 204, 84]), 2), new Color([255, 204, 84, 0.25]));
            //蓝色（三道唱颜色）
            _that.bluesymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 139]), 2), new Color([0, 0, 139, 0.25]));
            _that.SimpleLineSymbol = SimpleLineSymbol;
            _that.ProjectParameters = ProjectParameters;
            _that.PrjParams = new ProjectParameters();
            _that.PrjParams.outSR = new SpatialReference({
              wkid: 4326
            }); //需要输出的坐标系
            _that.PrjParams.geometries = []; //几何类型数组，比如多个点可以批量转换
            _that.Color = Color;
            _that.Graphic = Graphic;
            _that.Polygon = Polygon;
            var map = new Map("viewDiv", {
              center: [106.5489, 29.6499], // 自定义地图中心点
              zoom: 18
            });
            var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
            var token = "bfbe76395f9d96941f2a2a5c4b9bd719"; //天地图管网申请token
            //球面墨卡托投影矢量底图
            var tiledLayer = WebTiledLayer(tiandituBaseUrl +
              '/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk=' + token, {
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
              })
            //将天地图底图添加到map上
            map.addLayer(tiledLayer);
            var firstLayer = new GraphicsLayer(); //第一图层（显示数据库中的图形）
            map.addLayer(firstLayer);
            //坐标转换服务
            var gsvc = new GeometryService(
              "https://arcgis.cqbaotukeji.cn/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            _that.gsvc = gsvc;
            //每循环一次生成一个图形
            for (var i = 0; i < pointList.length; i++) {
              var PrjParams = new ProjectParameters();
              PrjParams.outSR = new SpatialReference({
                wkid: 4326
              }); //需要输出的坐标系
              PrjParams.geometries = []; //几何类型数组，比如多个点可以批量转换
              _that.PrjParams = PrjParams;
              for (let j = 0; j < pointList[i].length; j++) {
                var point = new Point(parseFloat(pointList[i][j].lat), parseFloat(pointList[i][j].lon),
                  new SpatialReference({
                    wkid: 4524
                  }));
                PrjParams.category = pointList[i][j].category; //设置几道场
                PrjParams.applyCode = pointList[i][j].applyCode; //设置业务编号
                PrjParams.geometries.push(point);
              }
              checkStateGraphic(PrjParams);
            }
            //图形首次加载
            function checkStateGraphic(pps) {
              if (pps.category == 0) {
                gsvc.project(pps, function (outputpoints) {
                  var pts = [];
                  if (_that.pointCenterPD == 0) {
                    var centerPoint = new Point(
                      outputpoints[0].x,
                      outputpoints[0].y,
                      new SpatialReference({
                        wkid: 4326,
                      })
                    );
                    map.centerAt(centerPoint, 10);
                    _that.pointCenterPD = 1; //赋值后下次循环不进入该判断
                  }
                  //每个图形转换后的所有点
                  for (let i = 0; i < outputpoints.length; i++) {
                    pts.push([outputpoints[i].x, outputpoints[i].y]);
                  }
                  var geometry = new Polygon({
                    rings: [pts],
                    spatialReference: {
                      wkid: 4326,
                    },
                  });
                  var graphic = new Graphic(geometry, _that.redsymbol);
                  graphic.applyCode = pps.applyCode;
                  graphic.category = pps.category;
                  _that.statePointList1.push(graphic);
                  _that.map = map;
                  //所有数据库中的图形放置在第一图层
                  firstLayer.add(graphic);
                  _that.firstLayer = firstLayer;
                });
              } else if (pps.category == 1) {
                gsvc.project(pps, function (outputpoints) {
                  var pts = [];
                  if (_that.pointCenterPD == 0) {
                    var centerPoint = new Point(
                      outputpoints[0].x,
                      outputpoints[0].y,
                      new SpatialReference({
                        wkid: 4326,
                      })
                    );
                    map.centerAt(centerPoint, 10);
                    _that.pointCenterPD = 1;
                  }
                  //每个图形转换后的所有点
                  for (let i = 0; i < outputpoints.length; i++) {
                    pts.push([outputpoints[i].x, outputpoints[i].y]);
                  }
                  var geometry = new Polygon({
                    rings: [pts],
                    spatialReference: {
                      wkid: 4326,
                    },
                  });
                  var graphic = new Graphic(geometry, _that.yellowsymbol);
                  graphic.applyCode = pps.applyCode;
                  graphic.category = pps.category;
                  _that.statePointList2.push(graphic);
                  _that.map = map;
                });
              } else if (pps.category == 2) {
                gsvc.project(pps, function (outputpoints) {
                  var pts = [];
                  if (_that.pointCenterPD == 0) {
                    var centerPoint = new Point(
                      outputpoints[0].x,
                      outputpoints[0].y,
                      new SpatialReference({
                        wkid: 4326,
                      })
                    );
                    map.centerAt(centerPoint, 10);
                    _that.pointCenterPD = 1;
                  }
                  //每个图形转换后的所有点
                  for (let i = 0; i < outputpoints.length; i++) {
                    pts.push([outputpoints[i].x, outputpoints[i].y]);
                  }
                  var geometry = new Polygon({
                    rings: [pts],
                    spatialReference: {
                      wkid: 4326,
                    },
                  });
                  var graphic = new Graphic(geometry, _that.bluesymbol);
                  graphic.applyCode = pps.applyCode;
                  graphic.category = pps.category;
                  _that.statePointList3.push(graphic);
                  _that.map = map;
                });
              }
            }
            _that.moveLayer = new GraphicsLayer(); //用来存放可拖动的图形
            //地图鼠标点击响应事件
            firstLayer.on("click", function (evt) {
              if (evt.type == "click") {
                _that.drawer = true; //打开抽屉
                _that.selectedGraphics = evt.graphic; //选中的第一层图层上的原图
                //根据当前图形的编号查询不同状态的业务信息
                console.log(evt.graphic.applyCode)
                getMapInfoApi(evt.graphic.applyCode).then(res => {
                  var data = res.data.data;
                  _that.formData.name = data.name;
                  _that.formData.applyCode = data.applyCode;
                  _that.formData.idCard = data.idCard;
                  _that.formData.address = data.address;
                  _that.formData.applyFoundationArea = data.applyFoundationArea;
                  _that.formData.applyHomesteadArea = data.applyHomesteadArea;
                  _that.formData.applyHousingArea = data.applyHousingArea;
                  _that.formData.nowHomesteadArea = data.nowHomesteadArea;
                  _that.formData.nowBuildingArea = data.nowBuildingArea;
                  _that.formData.nowSaveArea = data.nowSaveArea;
                  _that.formData.nowOtherArea = data.nowOtherArea;
                  _that.formData.nowReturnArea = data.nowReturnArea;
                })
                draw(evt.graphic.geometry.rings, evt.graphic.applyCode, evt.graphic.category); //创建一个新的图形用于移动
              }
            });
            //新图层事件
            _that.moveLayer.on("mouse-down", function (e) {
              map.disablePan();
              map.setMapCursor("pointer");
              var startPoint = e.mapPoint;
              var param = new ProjectParameters();
              param.outSR = new SpatialReference({
                wkid: 4326
              })
              param.geometries = [startPoint]; //设置坐标转换的点
              //起始点坐标转换
              gsvc.project(param, function (res) {
                _that.startPoint = res[0]; //起始点
              })

            })
            //新图层的拖拽
            map.on("mouse-drag", function (evt) {
              if (_that.startPoint == null) {
                map.enableMapNavigation();
                map.enablePan();
              } else {
                map.setMapCursor("pointer");
                var point = evt.mapPoint; //鼠标移动时的坐标
                var param = new ProjectParameters();
                param.outSR = new SpatialReference({
                  wkid: 4326
                })
                param.geometries = [point]; //设置坐标转换的点
                //起始点坐标转换
                gsvc.project(param, function (res) {
                  _that.currentPoint = res[0]; //起始点
                })
                _that.moveLayer.clear(); //先清空图形
                map.removeLayer(_that.moveLayer);
                if (_that.currentPoint == null || _that.currentPoint == "") {
                  return;
                } else {
                  //获取鼠标移动位置与起始位置的距离
                  var x = _that.currentPoint.x - _that.startPoint.x;
                  var y = _that.currentPoint.y - _that.startPoint.y;
                  var points = _that.selectedGraphics.geometry.rings[0]; //获取原图的坐标
                  var pts = [];
                  for (let i = 0; i < points.length; i++) {
                    pts.push([points[i][0] + x, points[i][1] + y])
                  }
                  var geometry = new Polygon({
                    rings: [pts],
                    spatialReference: {
                      wkid: 4326,
                    },
                  });
                  var newgraphic = new Graphic(geometry, _that.symbol);
                  newgraphic.applyCode = _that.selectedGraphics.applyCode;
                  newgraphic.category = _that.selectedGraphics.category;
                  _that.lastGraphic = newgraphic;
                  _that.moveLayer.add(_that.lastGraphic);
                  map.addLayer(_that.moveLayer);
                }
              }
            })
            //触发"mouse-drag-end，通知拖拽结束
            map.on("mouse-drag-end", lang.hitch(this, function (evt) {
              if (_that.startPoint == null) {
                map.enableMapNavigation();
              } else {
                _that.$confirm("是否移动到此处?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }).then(() => {
                  //先修改数据库（如果修改成功才放置图形）
                  var point = _that.lastGraphic.geometry.rings[0];
                  var param = new ProjectParameters();
                  param.outSR = new SpatialReference({
                    wkid: 4524
                  });
                  param.geometries = [];
                  for (let i = 0; i < point.length; i++) {
                    var pts = new Point(point[i][0], point[i][1], new SpatialReference({
                      wkid: 4326
                    }));
                    param.geometries.push(pts);
                  }
                  //4326转4524存入数据库
                  gsvc.project(param, function (res) {
                    var datalist = [];
                    for (let j = 0; j < res.length; j++) {
                      var foursite = {
                        applyCode: _that.lastGraphic.applyCode,
                        category: _that.lastGraphic.category,
                        lat: res[j].x,
                        lon: res[j].y,
                        type: j + 1,
                        coordinate: 4524
                      }
                      datalist.push(foursite);
                    }
                    //更换数据库坐标
                    updatePointApi(datalist).then(res => {
                      _that.$message({
                        message: '操作成功！',
                        type: 'success'
                      });
                      //成功后删除原图、清空起始点、选中复原、清空拖动的图层
                      _that.startPoint = null;
                      _that.movegraphic = null;
                      firstLayer.remove(_that.selectedGraphics);
                      _that.selectedGraphics = null;
                      _that.moveLayer.clear();
                      //暗到场类型分别生成拖动后的图形
                      makeSureGraphic(_that.lastGraphic);
                      map.setMapCursor("default");
                      map.enableMapNavigation();
                    }).catch(() => {
                      //取消拖动放置
                      _that.selectedGraphics = null;
                      _that.moveGraphic = null;
                      _that.moveLayer.clear();
                      map.removeLayer(_that.moveLayer);
                      map.setMapCursor("default");
                      map.enableMapNavigation();
                    })
                  })

                }).catch(() => {
                  //取消拖动放置
                  _that.selectedGraphics = null;
                  _that.moveGraphic = null;
                  _that.moveLayer.clear();
                  map.removeLayer(_that.moveLayer);
                  map.setMapCursor("default");
                  map.enableMapNavigation();
                })
              }
            }));

            function makeSureGraphic(lastgraphic) {
              if (lastgraphic.category == 0) {
                lastgraphic.symbol = _that.redsymbol;
                firstLayer.refresh();
                //确认拖动后删除原本数组中的对象再添加最后的对象
                for (let i = 0; i < _that.statePointList1.length; i++) {
                  if (_that.statePointList1[i].applyCode == lastgraphic.applyCode) {
                    _that.statePointList1.splice(i, 1, lastgraphic);
                  }
                }
                firstLayer.add(lastgraphic);
              } else if (lastgraphic.category == 1) {
                lastgraphic.symbol = _that.yellowsymbol;
                firstLayer.refresh();
                for (let i = 0; i < _that.statePointList2.length; i++) {
                  if (_that.statePointList2[i].applyCode == lastgraphic.applyCode) {
                    _that.statePointList2.splice(i, 1, lastgraphic);
                  }
                }
                firstLayer.add(lastgraphic);
              } else if (lastgraphic.category == 2) {
                lastgraphic.symbol = _that.bluesymbol;
                firstLayer.refresh();
                for (let i = 0; i < _that.statePointList3.length; i++) {
                  if (_that.statePointList3[i].applyCode == lastgraphic.applyCode) {
                    _that.statePointList3.splice(i, 1, lastgraphic);
                  }
                }
                firstLayer.add(lastgraphic);
              }
            }
            //画图
            function draw(rings, applyCode, category) {
              //初始化可拖动图形的样式，将图形添加到放置可拖动图形的图层
              var geometry = new Polygon({
                rings: rings,
                spatialReference: {
                  wkid: 4326,
                },
              });
              var newgraphic = new Graphic(geometry, _that.symbol);
              newgraphic.applyCode = applyCode;
              newgraphic.category = category;
              _that.movegraphic = newgraphic;
            }

          });
      },
      moveGraphicMethod() {
        this.$confirm("是否确定移动此图形?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          //确定时关闭抽屉添加拖拽图形
          this.drawer = false;
          //先新加一个图层（存放生成的新图形）
          this.moveLayer.add(this.movegraphic);
          this.map.addLayer(this.moveLayer); //确定拖动后添加图层到map
        }).catch(() => {

        })
      },
      handChange(state) {
        //一到场图形
        if (state == 0 && event.target.checked == true) {
          for (let i = 0; i < this.statePointList1.length; i++) {
            this.firstLayer.add(this.statePointList1[i])
          }
        } else if (state == 0 && event.target.checked == false) {
          for (let i = 0; i < this.statePointList1.length; i++) {
            this.firstLayer.remove(this.statePointList1[i]);
          }
          for (let i = 0; i < this.searchStatePointList1.length; i++) {
            this.firstLayer.remove(this.searchStatePointList1[i]);
          }
        }
        //二到场图形
        if (state == 1 && event.target.checked == true) {
          for (let i = 0; i < this.statePointList2.length; i++) {
            this.firstLayer.add(this.statePointList2[i]);
          }
        } else if (state == 1 && event.target.checked == false) {
          for (let i = 0; i < this.statePointList2.length; i++) {
            this.firstLayer.remove(this.statePointList2[i]);
          }
          for (let i = 0; i < this.searchStatePointList2.length; i++) {
            this.firstLayer.remove(this.searchStatePointList2[i]);
          }
        }

        //三到场图形 
        if (state == 2 && event.target.checked == true) {
          for (let i = 0; i < this.statePointList3.length; i++) {
            this.firstLayer.add(this.statePointList3[i]);
          }
        } else if (state == 2 && event.target.checked == false) {
          for (let i = 0; i < this.statePointList3.length; i++) {
            this.firstLayer.remove(this.statePointList3[i]);
          }
          for (let i = 0; i < this.searchStatePointList3.length; i++) {
            this.firstLayer.remove(this.searchStatePointList3[i]);
          }
        }

      },
      //提交搜索
      submitForm(mapInfo) {
        var _that = this;
        var Graphic = this.Graphic;
        var Polygon = this.Polygon;
        var symbol = this.symbol;
        var redsymbol = this.redsymbol;
        var bluesymbol = this.bluesymbol;
        var yellowsymbol = yellowsymbol;
        // yellowsymbol: null, //图形样式（黄色二到场）
        // bluesymbol: null, //图形样式（蓝色三到场）
        // symbol: null, //搜索、移动图形样式
        var Point = this.Point;
        var SpatialReference = this.SpatialReference;
        var map = this.map;
        var pointCenterPD = this.pointCenterPD;
        if (!this.searchForm) {
          this.$message.warning('请输入要查询的信息');
          return;
        } else {
          //根据applyCode查询图形
          searchByApi(this.searchForm).then(res => {
            var data = res.data.data;
            this.firstLayer.clear();
            if (data.length != 0) {
              for (let j = 0; j < data.length; j++) {
                var pts = data[j]; //每一个图形的点
                var PrjParams = this.PrjParams;
                PrjParams.geometries = []; //几何类型数组，比如多个点可以批量转换
                for (let i = 0; i < pts.length; i++) {
                  var point = new Point(parseFloat(pts[i].lat), parseFloat(pts[i].lon), this.inSR);
                  PrjParams.category = pts[i].category; //设置几道场
                  PrjParams.applyCode = pts[i].applyCode; //设置几道场
                  PrjParams.geometries.push(point);
                }
                for (let x = 0; x < this.checkboxGroup.length; x++) {
                  if (this.checkboxGroup[x] == PrjParams.category && PrjParams.category == 0) {
                    this.gsvc.project(PrjParams, function (outputpoints) {
                      var pots = [];
                      if (pointCenterPD == 1) {
                        var centerPoint = new Point(
                          outputpoints[0].x,
                          outputpoints[0].y,
                          SpatialReference
                        );
                        map.centerAt(centerPoint, 10);
                        // pointCenterPD = 1; //赋值后下次循环不进入该判断
                      }
                      //每个图形转换后的所有点
                      for (let i = 0; i < outputpoints.length; i++) {
                        pots.push([outputpoints[i].x, outputpoints[i].y]);
                      }
                      var geometry = new Polygon({
                        rings: [pots],
                        patialReference: {
                          wkid: 4326,
                        },
                      });
                      var graphic = new Graphic(geometry, redsymbol);
                      graphic.symbol = redsymbol;
                      graphic.applyCode = PrjParams.applyCode;
                      graphic.category = PrjParams.category;
                      _that.searchStatePointList1.push(graphic);
                      _that.firstLayer.add(graphic);
                    });
                  } else if (this.checkboxGroup[x] == PrjParams.category && PrjParams.category == 1) {
                    this.gsvc.project(PrjParams, function (outputpoints) {
                      var pots = [];
                      if (pointCenterPD == 1) {
                        var centerPoint = new Point(
                          outputpoints[0].x,
                          outputpoints[0].y,
                          SpatialReference
                        );
                        map.centerAt(centerPoint, 10);
                        // pointCenterPD = 1; //赋值后下次循环不进入该判断
                      }
                      //每个图形转换后的所有点
                      for (let i = 0; i < outputpoints.length; i++) {
                        pots.push([outputpoints[i].x, outputpoints[i].y]);
                      }
                      var geometry = new Polygon({
                        rings: [pots],
                        patialReference: {
                          wkid: 4326,
                        },
                      });
                      var graphic = new Graphic(geometry, yellowsymbol);
                      graphic.symbol = yellowsymbol;
                      graphic.applyCode = PrjParams.applyCode;
                      graphic.category = PrjParams.category;
                      _that.searchStatePointList2.push(graphic);
                      _that.firstLayer.add(graphic);

                    });
                  } else if (this.checkboxGroup[x] == PrjParams.category && PrjParams.category == 2) {
                    this.gsvc.project(PrjParams, function (outputpoints) {
                      var pots = [];
                      if (pointCenterPD == 1) {
                        var centerPoint = new Point(
                          outputpoints[0].x,
                          outputpoints[0].y,
                          SpatialReference
                        );
                        map.centerAt(centerPoint, 10);
                        //pointCenterPD = 1; //赋值后下次循环不进入该判断
                      }
                      //每个图形转换后的所有点
                      for (let i = 0; i < outputpoints.length; i++) {
                        pots.push([outputpoints[i].x, outputpoints[i].y]);
                      }
                      var geometry = new Polygon({
                        rings: [pots],
                        patialReference: {
                          wkid: 4326,
                        },
                      });
                      var graphic = new Graphic(geometry, bluesymbol);
                      graphic.symbol = bluesymbol;
                      graphic.applyCode = PrjParams.applyCode;
                      graphic.category = PrjParams.category;
                      _that.searchStatePointList3.push(graphic);
                      _that.firstLayer.add(graphic);
                    });
                  }
                }
              }
              this.$message({
                showClose: true,
                message: "查询成功",
                type: "success",
              });

            } else {
              this.$message({
                showClose: true,
                message: "暂无数据",
                type: "warning",
              });
            }

          }).catch((error) => {
            this.$message({
              showClose: true,
              message: "暂无数据",
              type: "error",
            });

          });
        }

      },
    },
    mounted() {

    },
    watch: {},
  };
</script>

<style>
  @import url("http://39.100.19.27:9001/arcgis_js/3.24/esri/css/esri.css");

  .map {
    width: 102%;
    height: 100%;
    margin: 0 0 0 -1%;
    z-index: 0;
  }

  .searchMap {
    position: fixed;
    top: 35px;
    z-index: 999;
    left: 300px;
  }

  .checkMap {
    position: fixed;
    z-index: 999;
    right: 30px;
    top: 25px;
    width: 28px;
  }

  .dingwei {
    margin: 10px 10px 0 0;
    float: right;
    z-index: 999;
  }

  .legend {
    height: 12px;
    width: 12px;
    float: left;
    margin-left: -25px;
    margin-top: 5px
  }

  .checkboxStyle {
    float: left;
  }

  .map .el-dialog {
    position: fixed;
    margin-top: 5vh !important;
    width: 8%;
    right: 100px;
    border-radius: 10%;
    padding-bottom: 10px;
    background-color: #ffffff1f;
  }

  .map .el-dialog__header {
    padding: 0;
  }

  .map .el-dialog__body {
    padding: 10px 0;
  }

  .map .el-checkbox__label {
    color: #ffffff;
  }

  .map .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #ffffff;
  }

  .menu_itme {
    color: #ffffff !important;
  }

  .el-dropdown-menu :hover {
    color: #000000 !important;
  }
</style>